<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style-type: none;
            border:1px solid black;
            width: 200px;
            padding:20px;
            margin: 20px auto;
        }
        li{
            height: 50px;
            line-height: 50px;
            background-color: #eee;
            text-align: center;
            margin:10px 0;
        }
    </style>
</head>
<body>
        <ul class="list1">
                <li>items 01</li>
                <li>items 02</li>
                <li>items 03</li>
                <li>items 04</li>
            </ul>
            <ul class="list2">
                
            </ul>
    <script>
        function $(e){
            return document.querySelectorAll(e);
        }
        for(var i=0;i<$('li').length;i++){
            $('li')[i].draggable=true;
            $('li')[i].flag=false;
            $('li')[i].ondragstart=function(){
               this.flag=true;
            }
            $('li')[i].ondragend=function(){
                this.flag=false;
            }
        }
    

        $('.list1')[0].addEventListener('dragenter',function(){},false);
        $('.list2')[0].addEventListener('dragenter',function(){},false);

        $('.list1')[0].addEventListener('dragover',function(e){
            e.preventDefault();
        },false);
        $('.list2')[0].addEventListener('dragover',function(e){
            e.preventDefault();
        },false);
        $('.list1')[0].addEventListener('dragleave',function(){},false);
        $('.list2')[0].addEventListener('dragleave',function(){},false);
        $('.list1')[0].addEventListener('drop',function(e){
           // e.preventDefault();
            var index;
            for(var j=0;j<$('li').length;j++){
                if($('li')[j].flag == true){
                    index=j;
                }
            }
           this.appendChild($('li')[index]);
        },false);
        $('.list2')[0].addEventListener('drop',function(e){
        var index;
        for( var j=0;j<$('li').length;j++ ){
            if( $('li')[j].flag == true ){
                index = j;
            }
        }
        this.appendChild($('li')[index]);
    },false);
    


    </script>
</body>
</html>